<template>
  <j-modal
    :maskClosable="false"
    :title="title"
    :width="width"
    :visible="visible"
    :destroyOnClose="true"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
    :bodyStyle="bodyStyle"
  >

    <!--   switchFullscreen  @ok="handleOk"-->
    <!--    okText="打印"-->

    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
      <!--      <a-button v-if="disableSubmit" @click="print()" type="primary">打印</a-button>-->
      <a-button v-print="'#printContent'" @click="print()" ghost type="primary">打印</a-button>
    </template>

    <a-card class="daily-article" :loading="confirmLoading">
      <section>
        <div ref="printContent" class="abcdefg" id="printContent" v-watermark="{text:'行政事业单位物资'}" v-html="msgContent"></div>
      </section>
    </a-card>
  </j-modal>
</template>

<script>

import JDate from '@/components/jeecg/JDate'
import { queryPrintById } from '@/api/receivables'
import { dateFormatA } from '@/utils/util'
// import Print from 'vue-print-nb'

export default {
  name: 'ReceivablesPrintModal',
  components: {
    JDate
  },
  data () {
    return {
      form: this.$form.createForm(this),
      title: '',
      width: 900,
      visible: false,
      disableSubmit: false,
      showBtn: true,
      model: {},
      // contract: {},
      msgContent: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      bodyStyle: {
        padding: '0',
        height: (window.innerHeight - 300) < 300 ? 300 : (window.innerHeight - 300) + 'px',
        // height:(window.innerHeight*0.6)+"px",
        'overflow-y': 'auto'
      }
    }
  },
  created () {

    // this.selectSub()
  },
  methods: {
    print () {
    },
    show (printTemplateId, receivablesId,payeeAmount) {
      debugger
      let that = this
      this.visible = true
      this.title = '打印收据'
      this.model = Object.assign({}, printTemplateId)
      queryPrintById({ id: receivablesId ,printTemplateId: printTemplateId,payeeAmount: payeeAmount}).then((res) => {
        console.log(res)
        if (res.success) {
          // that.contract = res.result.va
          that.msgContent = res.result
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        // this.confirmLoading = false
      })
    },
    close () {
      this.$emit('close')
      this.visible = false
    },
    // handleOk () {
    //   const that = this
    //   Print(this.$refs.printContent) // 使用
    //   // this.$nextTick(() => {
    //   //   that.$print(that.$refs.printContent);
    //   // })
    // },
    handleCancel () {
      this.close()
    }

  }
}
</script>
<style>
@media print {
  .no-print {
    display: none;
  }
}
</style>
<style scoped>
/*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
* {
  color: #000000 !important;
  -webkit-tap-highlight-color: #000000 !important;
}

/*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

.abcdefg .ant-card-body {
  margin-left: 0%;
  margin-right: 0%;
  margin-bottom: 1%;
  border: 0px solid black;
  min-width: 800px;
  color: #000000 !important;
}

.explain {
  text-align: left;
  margin-left: 50px;
  color: #000000 !important;
}

.explain .ant-input, .sign .ant-input {
  font-weight: bolder;
  text-align: center;
  border-left-width: 0px !important;
  border-top-width: 0px !important;
  border-right-width: 0px !important;
}

.explain div {
  margin-bottom: 10px;
}

/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>